<template>
  <div>
  <!-- 搜索表单 -->
  <div style="margin-bottom: 20px">
    <el-input style="width: 240px" placeholder="请输入用户ID"></el-input>
    <el-input style="width: 240px; margin-left: 5px" placeholder="请输入用户名"></el-input>
    <el-button style="margin-left: 5px" type="primary"><i class="el-icon-search"></i>搜索</el-button>
  </div>

  <div>
    <el-table :data="tableData" stripe>
      <el-table-column prop="id" label="用户ID"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="password" label="用户密码"></el-table-column>
      <el-table-column prop="is_deleted" label="逻辑删除（0-未删除，1-已删除）"></el-table-column>
      <el-table-column prop="created_at" label="创建时间"></el-table-column>
      <el-table-column prop="updated_at" label="更新时间"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="margin-top: 20px">
      <el-pagination
          background
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          layout="prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
  </div>
</template>



<script lang="ts">
import request from "@/utils/request";

export default {
  name: 'User',
  data() {
    return {
      tableData: [],
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 10,
        ID:123456,
        username: ''
      }

    }
  },
  created() {
    this.load()
  },
  methods: {
    load(){
      // fetch('http://localhost:9090/user/list').then(res=>res.json()).then(res=>{
      //   console.log(res)
      //   this.tableData = res;
      // })
      request.get('/user/page',{
        params: this.params
      }).then(res=>{
        if(res.code=== '200'){
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    }
  }
}
</script>

<style scoped>

</style>